<template>
  <div class="app-container-item">
    <div class="form-main">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="form-flex">
        <el-row :gutter="20">
          <el-col :span="8" :xs="24">
            <el-form-item label="所属小区" prop="communityName">
              <el-input v-model="form.communityName" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="所属楼栋" prop="floorName">
              <el-input v-model="form.floorName" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="所属单元" prop="unitName">
              <el-input v-model="form.unitName" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="层数" prop="layerNum">
              <el-input v-model="form.layerNum" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="房间号" prop="roomNum">
              <el-input v-model="form.roomNum" placeholder="请输入房屋编号"/>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="住所户型" prop="apartment">
              <el-select v-model="form.apartment" placeholder="请选择住所户型">
                <el-option
                  v-for="dict in dict.apartment"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="使用面积" prop="roomArea">
              <el-input-number v-model="form.roomArea" :min="0" controls-position="right" :precision="2" label="请输入房屋面积"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="建筑面积" prop="buildArea">
              <el-input-number v-model="form.buildArea" controls-position="right" :min="0" :precision="2" label="请输入建筑面积"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="算费系数" prop="feeCoefficient">
              <el-input-number v-model="form.feeCoefficient" controls-position="right" :min="1" :max="100" label="请输入算费系数"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="房屋属性" prop="state">
              <el-select v-model="form.state" placeholder="请选择房屋属性"  disabled>
                <el-option
                  v-for="dict in dict.floor_state"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="房屋状态" prop="statusCd">
              <el-select v-model="form.statusCd" placeholder="请选择房屋状态">
                <el-option
                  v-for="dict in dict.housing_status"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="16" :xs="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="dialog-footer" style="text-align: center;">
      <el-button type="primary" plain @click="submitForm" v-hasPermi="['property:room:edit']">保 存</el-button>
    </div>
  </div>
</template>

<script>
  import {getRoom, delRoom, updateRoom } from "@/api/property/room";

  export default {
    name: "Room",
    dicts:['apartment','floor_state','housing_status'],
    data() {
      return {
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          communityId: null,
          deptId: null,
          floorId: null,
          unitId: null,
          layerNum: null,
          roomNum: null,
          roomName: null,
          apartment: null,
          roomArea: null,
          feeCoefficient: null,
          address: null,
          state: null,
          statusCd: null,
          nodeId: null,
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          roomNum: [
            {required: true, message: "所属单元不能为空", trigger: "blur"}
          ],
          roomArea: [
            {required: true, message: "使用面积不能为空", trigger: "blur"}
          ],
          buildArea: [
            {required: true, message: "建筑面积不能为空", trigger: "blur"}
          ],
        },
      };
    },
    watch: {
      currentNode(v) {
        this.initForm()
      }
    },
    created() {
      this.initForm()
    },
    methods: {
      initForm() {
        this.reset();
        if (this.currentNode.modelType == 'room') {
          getRoom(this.currentNode.id).then(response => {
            this.form = response.data;
          });
        }
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          communityId: null,
          deptId: null,
          floorId: null,
          unitId: null,
          layerNum: null,
          roomNum: null,
          roomName: null,
          apartment: null,
          roomArea: '0.00',
          feeCoefficient: null,
          address: null,
          ancestors: null,
          dataSourceId: null,
          state: null,
          statusCd: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          remark: null,
          buildArea: '0.00'
        };
        this.resetForm("form");
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids
        getRoom(id).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改房屋管理";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            updateRoom(this.form).then(response => {
              this.msgSuccess("修改房间资料成功");
              this.open = false;
              this.getList();
            });
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$confirm('是否确认删除房屋管理编号为"' + ids + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return delRoom(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(() => {
        });
      },
    },
    props: {
      currentNode: {
        type: Object,
        default:()=>{}
      },
    }
  };
</script>
